<script setup lang="ts">
import { ref } from 'vue'
import {useRouter} from "vue-router"
import { menuConfig } from "./homeConfig";

const router = useRouter()

const handleSelect = (key: string, keyPath: string[]) => {
  router.push(`/${key}`)
}
const outLogin = ()=>{
  router.push('/')
}
interface Tree {
  id: number
  label: string
  children?: Tree[]
}

const dataSource = ref<Tree[]>([
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
])
const renderContent = (
  h,
  {
    node,
    data,
    store,
  }: {
    node: Node
    data: Tree
    store: Node['store']
  }
) => {
  return h(
    'span',
    {
      class: 'custom-tree-node',
    },
    h('span', null, node.label),
    h(
      'span',
      null,
      h(
        'a',
        {
          onClick: () => append(data),
        },
        '新增 '
      ),
      h(
        'a',
        {
          style: 'margin-left: 8px',
          onClick: () => remove(node, data),
        },
        '删除'
      )
    )
  )
}

const dialogVisible = ref(false)
</script>

<template>
  <h3 class="home_title">首页</h3>
    <el-button style="position: absolute;right: 10px;top: 20px;" @click="outLogin" type="primary">退出登录</el-button>
  <el-row class="tac">
    <el-col :span="4" style="height: 100%;overflow-y: scroll;">
      <el-menu
        default-active="2"
        @select="handleSelect"
        class="el-menu-vertical-demo"
      >
        <el-sub-menu v-for="(menu,menuIndex) in menuConfig" :index="menuIndex">
          <template #title>
            <el-icon><location /></el-icon>
            <span>{{ menu.title }}</span>
          </template>
          <el-menu-item-group v-for="(type,typeTit) in menu.children" :title="typeTit">
            <el-menu-item v-for="(it,ind) in menu.children[typeTit]" :index="it.index" >{{it.title}}</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
      <el-button @click="dialogVisible = true">编辑</el-button>
    </el-col>
    <el-col :span="20" class="home_main">
      <router-view></router-view>
    </el-col>
  </el-row>
  <el-dialog
    v-model="dialogVisible"
    title="菜单栏编辑"
    width="30%"
  >
  <div class="custom-tree-container">
  <el-tree
      :data="dataSource"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent"
    />
  </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">退出</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style>
.home_title{
  height: 30px;
}
.home_main{
  background-color: rgba(120, 126, 126, 0.128);
}
.tac{
  height: calc(100% - 80px);
}
.el-menu{
  height: 90%;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
